<template>
  <m-layout type="primary" class="score-input">
    <mt-header slot="header" :title="pageTitle">
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body">
      <div class="content-wrapper">
        <div class="student-info-wrapper">
          <m-flexbox class="student-info" v-if="stuDetail">
            <e-avatar :src="stuDetail.headPicture" class="student-info--avatar"/>
            <m-flexbox-item>
              <h4 class="student-info--name">{{stuDetail.name}}</h4>
              <m-flexbox class="student-info--other">
                <div classs="student-info--other--item" v-if="stuDetail.age">
                  <div class="info--value">{{stuDetail.age}}</div>
                  <div>年龄</div>
                </div>
                <div classs="student-info--other--item" v-if="stuDetail.height">
                  <div class="info--value">{{stuDetail.height}}cm</div>
                  <div>身高</div>
                </div>
                <div classs="student-info--other--item" v-if="stuDetail.weight">
                  <div class="info--value">{{stuDetail.weight}}kg</div>
                  <div>体重</div>
                </div>
              </m-flexbox>
            </m-flexbox-item>
          </m-flexbox>
        </div>
        <div class="input-content-wrapper">
          <m-flexbox class="input-content" v-if="stuDetail.testAgeName && itemScoreRuleInfo.testMethodName">
            <m-flexbox-item>{{itemScoreRuleInfo.testMethodName + `（${stuDetail.testAgeName}）`}}</m-flexbox-item>
            <div class="input-content-main">
              <!-- 主观-文本输入-1 非主观-下拉-0 -->
              <template v-if="itemScoreRuleInfo.testScoreType == TEST_SCORE_TYPE.OBJECT">
                <m-input type="number" v-model="score" placeholder="请输入内容" />
              </template>
              <template v-else-if="scoreStandard.standardList">
                <select v-model="score" class="score-select">
                  <option v-for="item in scoreStandard.standardList" :key="item.id" :value="item">{{item.testGrade}}</option>
                </select>
                <i class="mint-cell-allow-right"></i>
              </template>
            </div>
          </m-flexbox>
        </div>
        <div class="extra-score" v-if="itemScoreRuleInfo.scoureDetaiList && itemScoreRuleInfo.scoureDetaiList.length">
          <h2 class="extra-score--title">额外加减分项</h2>
          <m-checkbox-group class="extra-score--checkbox" v-model="checkboxValue">
            <m-checkbox
              class="extra-score--checkbox--item"
              direction="reverse"
              v-for="item in itemScoreRuleInfo.scoureDetaiList"
              :value="item.id"
              :key="item.id"
              >
              <m-flexbox>
                <m-flexbox-item style="white-space: normal;">{{item.testDetail}}</m-flexbox-item>
                <span style="width: 50px;">{{item.score + item.unit}}</span>
              </m-flexbox>
            </m-checkbox>
          </m-checkbox-group>
        </div>
      </div>
    </div>
    <div slot="bottom" class="btn-wrapper">
      <m-flexbox class="student-info-wrapper" v-if="stuDetail">
        <!-- 非主观题 才有评分标准 -->
        <m-flexbox-item v-if="itemScoreRuleInfo.testScoreType == TEST_SCORE_TYPE.OBJECT">
          <mt-button type="primary" size="large" @click="handleShowStandard">查看评分标准</mt-button>
        </m-flexbox-item>
        <m-flexbox-item>
          <mt-button type="primary" size="large" :disabled="!score" @click="handleSaveScore">{{nextStudent ? '保存进入下一位' : '保存'}}</mt-button>
        </m-flexbox-item>
      </m-flexbox>
    </div>
  </m-layout>
</template>
<script>
import { mapState } from 'vuex'

const TEST_SCORE_TYPE = {
  'SUBJECT': '0', // 主观
  'OBJECT': '1' // 非主观
}
export default {
  data () {
    return {
      TEST_SCORE_TYPE,
      score: '',
      checkboxValue: [],
      nextStudent: '',
      testDate: new Date().format('yyyy-MM-dd')
    }
  },
  computed: {
    ...mapState({
      students: state => state.score.students,
      stuDetail: state => state.score.stuDetail,
      scoreStandard: state => state.score.scoreStandard,
      itemScoreRuleInfo: state => state.score.itemScoreRuleInfo
    }),
    pageTitle () {
      return this.itemScoreRuleInfo.testModeName + '成绩录入' || ''
    },
    query () {
      return this.$route.query
    }
  },
  created () {
    let studentId = this.query.studentId
    let students = this.students.list
    if (!students || !students.length) {
      this.getStudents(studentId)
    }
    this.initData(studentId)
  },
  methods: {
    initData (studentId) {
      let {orgUserId} = this.query
      this.$store.dispatch('score/stuDetail', {
        orgUserId,
        studentId
      }).then(() => {
        // 此处可以直接使用state的学生详情
        this.getItemScoreRuleInfo()
        if (this.query.testScoreType + '' === TEST_SCORE_TYPE.SUBJECT) {
          this.getScoreStandard()
        }
        this.nextStudent = this.getNextStudent(studentId)
      })
    },
    getStudents (studentId) {
      let query = this.query
      this.$store.dispatch('score/students', {
        orgUserId: query.orgUserId,
        testItemId: query.testItemId,
        classId: query.classId,
        page: 1, // 默认
        rows: 10 // 默认
      }).then(() => {
        this.nextStudent = this.getNextStudent(studentId)
      })
    },
    getItemScoreRuleInfo () {
      let query = this.query
      let stuDetail = this.stuDetail
      this.$store.dispatch('score/itemScoreRuleInfo', {
        testDateStr: this.testDate,
        testMethodId: query.testContentId,
        testModeId: query.testItemId,
        studentId: stuDetail.id,
        ageDictionarieId: stuDetail.testAgeId,
        sportType: 3002 // 写死
      }).then(() => {
        if (this.query.testScoreType + '' === TEST_SCORE_TYPE.OBJECT) {
          this.score = this.itemScoreRuleInfo.testScore
        }
      })
    },
    getScoreStandard () {
      let query = this.query
      let stuDetail = this.stuDetail
      this.$store.dispatch('score/scoreStandard', {
        orgUserId: query.orgUserId,
        itemId: query.testContentId,
        ageId: stuDetail.testAgeId
      }).then(() => {
        let standardList = this.scoreStandard.standardList || []
        if (this.query.testScoreType + '' === TEST_SCORE_TYPE.SUBJECT) {
          this.score = standardList.find(k => k.maxValue === this.itemScoreRuleInfo.testScore)
        }
      })
    },
    getNextStudent (studentId) {
      let nextStudent = ''
      let students = this.students.list || []
      let curIndex = students.findIndex(k => k.studentId - 0 === studentId - 0)
      if (curIndex > -1 && curIndex + 1 < students.length) {
        nextStudent = students[curIndex + 1]
      }
      return nextStudent
    },
    handleSaveScore () {
      let score = this.score // 默认主观题 输入值
      let query = this.query
      let testScoreType = this.query.testScoreType + ''
      if (testScoreType === TEST_SCORE_TYPE.SUBJECT) {
        score = this.score.maxValue // 客观题下拉值
      }
      let subData = {
        extraTestScores: this.checkboxValue,
        orgUserId: query.orgUserId,
        testDate: this.testDate,
        testMethodId: query.testContentId,
        testModeId: query.testItemId,
        testScore: score
      }
      this.$store.dispatch('score/saveTestScore', subData).then(() => {
        if (this.nextStudent) {
          this.score = ''
          this.initData(this.nextStudent.studentId)
        } else {
          history.back()
          // this.$router.replace({
          //   name: 'scoreStudent',
          //   query: this.query
          // })
        }
      })
    },
    handleShowStandard () {
      let {testAgeId, testAgeName} = this.stuDetail
      let {testModeName} = this.itemScoreRuleInfo
      this.$router.push({
        name: 'scoreStandard',
        query: Object.assign({}, this.query, {
          testModeName,
          testAgeId,
          testAgeName
        })
      })
    },
    handleBack () {
      history.back()
    }
  }
}
</script>
<style lang="scss" scoped>
  .score{
    &-input{
      .content-wrapper{
        .student-info-wrapper{
          padding: .53rem .3rem 0 .4rem;
          border-bottom: .01rem solid $border-color-base;
          .student-info{
            align-items: flex-start;
            height: 1.9rem;
            font-size: $font-size-small;
            &--avatar{
              height: .8rem;
              width: .8rem;
              border-radius: 100%;
            }
            &--name{
              margin: 0;
              font-weight: normal;
            }
            &--other{
              margin-top: .16rem;
              justify-content: space-between;
              text-align: center;
              .info--value{
                font-size: $font-size-default;
                line-height: 1;
              }
            }
          }
        }
        .input-content-wrapper{
          padding-left: .24rem;
          border-bottom: .01rem solid $border-color-base;
          .input-content{
            height: 1rem;
            .input-content-main{
              position: relative;
              width: 2rem;
              text-align: center;
              .m-input::before{
                display: none;
              }
              .score-select{
                display: block;
                padding-left: .5rem;
                width: 100%;
                appearance: none;
                background-color: transparent;
                text-align: center;
              }
            }
          }
        }
        .extra-score{
          &--title{
            height: .88rem;
            margin: 0;
            padding: 0 .24rem;
            line-height: .88rem;
            font-weight: normal;
            font-size: $font-size-small;
            background-color: $color-background-sub;
          }
          &--checkbox{
            &--item{
              padding: .3rem .24rem
            }
          }
        }
      }
    }
  }
</style>
